<template>
  <div class="t-dis">
    <div style="padding: 0px 15px 0 15px">
      <!-- <VolHeader
        icon="el-icon-warning-outline"
        text="查询条件"
        style="margin-bottom: 20px"
      >
      </VolHeader> -->
      <div class="vol-form-item" style="margin-bottom: 15px;display: none">
        <el-row :gutter="20">
          <el-col :span="8"
            ><div class="grid-content">
              <span style="float: left; line-height: 30px; font-size: 15px"
                >审核状态：</span
              >
              <el-select
                v-model="searchFields.shzt"
                placeholder="请选择审核状态"
                style="float: left; width: 80%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select></div
          ></el-col>

          <el-col :span="8"
            ><div class="grid-content">
              <div class="block">
                <span style="float: left; line-height: 30px; font-size: 15px"
                  >审核时间：</span
                >
                <el-date-picker
                  style="float: left; width: 80%"
                  v-model="searchFields.sh_sj"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content">
              <el-button
                type="primary"
                class="edit_btn"
                @click="btnSeach"
                style="font-size: 15px"
              >
                <i class="el-icon-search"></i>&nbsp;&nbsp;&nbsp;搜索</el-button
              >
              <el-button
                type="primary"
                class="edit_btn"
                @click="btnImport"
                style="font-size: 15px; float: right"
              >
                <i class="el-icon-download"></i
                >&nbsp;&nbsp;&nbsp;导出</el-button
              >
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <div style="height: 10px; background: #eee"></div>
    <div class="example-tb">
      <div class="tb">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="地市级作业单位" name="djs">
            <vol-table
              ref="table"
              :columns="dsjcolumns"
              :max-height="700"
              :columnIndex="false"
              :index="false"
              :ck="false"
              :text-inline="false"
              :tableData="tableData"
              :paginationHide="false"
              @loadBefore="loadTableBefore"
              @loadAfter="loadTableAfter"
              :url="url"
              :override="true"
            ></vol-table>
          </el-tab-pane>
          <el-tab-pane label="县级作业单位" name="xjs">
            <vol-table
              ref="table"
              :columns="columns"
              :max-height="700"
              :columnIndex="false"
              :ck="false"
              :text-inline="false"
              :tableData="tableData"
              :paginationHide="false"
              @loadBefore="loadTableBefore"
              @loadAfter="loadTableAfter"
              :url="url"
              :override="true"
            ></vol-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
//import table2 from "@/views/tables/applyauttable";

import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    VolTable,
    VolHeader,
    VolForm,
  },
  methods: {
    handleTabClick(tab, event) {
     // if (tab.index === 1) 
      { // 判断是否切换到第二个tab
        this.activeName=tab.props.name;
      } 
      this.btnSeach() // 调用提示message的方法
    },
    btnSeach() {
      this.$refs.table.load();
    },
    btnImport() {
      var param = {
        sq_sj: this.searchFields.sq_sj,
        sh_sj: this.searchFields.sh_sj,
        shzt: this.searchFields.shzt,
        pageindex: this.pageindex,
        pagesize: this.pagesize,
        activeName:this.activeName
      };

      this.http
        .post("/api/xj_review_progress/ExportFile", param, true, {
          responseType: "blob",
        })
        .then((result) => {
          let now = new Date();
          let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
          let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
          let today = now.getDate(); //获取当前日(1-31)
          let hour = now.getHours(); //获取当前小时数(0-23)
          let minute = now.getMinutes(); //获取当前分钟数(0-59)
          let second = now.getSeconds(); //获取当前秒数(0-59)

          const elink = document.createElement("a");
          elink.download =
            year +
            "" +
            month +
            "" +
            today +
            "" +
            hour +
            "" +
            minute +
            "" +
            second;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(result);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        });
    },
    loadTableBefore(param, callBack) {
      //生成查询条件
      param.wheres = [
        //设置为like模糊查询
        {
          name: "sq_sj",
          value: this.searchFields.sq_sj,
        },
        {
          name: "sh_sj",
          value: this.searchFields.sh_sj,
        },
        {
          name: "shzt",
          value: this.searchFields.shzt,
        },
        {
          name: "activeName",
          value: this.activeName,
        },
        {
          name: "pagesize",
          value: this.pagesize,
        },
        {
          name: "pageindex",
          value: this.pageindex,
        },
      ];
      callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
    },
    loadTableAfter(data, callBack) {
      //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
      //  console.log("加载数据后" , data);
      callBack(true); //同上
    },
  },
  watch: {
    pagesize: {
      handler(files) {
        this.$refs.table.load();
      },
      deep: true,
    },
  },
  watch: {
    pageindex: {
      handler(files) {
        this.$refs.table.load();
      },
      deep: true,
    },
  },
  mounted() {},

  data() {
    return {
      loadKey: true,
      activeName:"djs",
      searchFields: {
        sq_sj: "",
        sh_sj: "",
        shzt: "",
      },
      options: [
        {
          value: -2,
          label: "全部",
        },
        {
          value: -1,
          label: "待审核",
        },
        {
          value: 0,
          label: "不通过",
        },
        {
          value: 1,
          label: "已通过",
        },
        {
          value: -3,
          label: "未提交",
        },
      ],
      currentRow: "",
      pageindex: 1,
      pagesize: 50,
      total: 0,
      model: false,
      fmodel: false,
      width: "90%",
      pdfwidth: "50%",
      title: "测试",
      detailParams: "",
      fistfileName: "",
      url: "/api/xj_review_progress/GetData", //使用后台自带的上传文件方法，也可以自定义方法上传
      text: "",
      tableData: [],
      columns: [
        //表配置
        {
          field: "data_id", //数据库表字段,必须和数据库一样，并且大小写一样
          type: "string", //数据类型
          isKey: true, //是否为主键字段
          width: 80, //表格宽度
          hidden: true, //是否显示
          readonly: true,
          require: true,
          align: "left", //文字显示位置left、center
        },
        {
          field: "idx",
          title: "序号",
          type: "string",
          width: 50,
          align: "center",
        },
        {
          field: "citymc",
          title: "地市名称",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "xzqmc",
          title: "区县名称",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "sqcount",
          title: "申请次数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "jycs",
          title: "交验次数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "shzt",
          title: "最后一次申请记录审核状态",
          type: "string",
          width: 70,
          align: "center",
          render: (h, { row, column, index }) => {
            if (row.shzt == "已通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--success el-tag--light"],
                    },
                    "已通过"
                  ),
                ]),
              ]);
            } else if (row.shzt == "未审核") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--warning el-tag--light"],
                    },
                    "待审核"
                  ),
                ]),
              ]);
            } else if (row.shzt == "不通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--danger el-tag--light"],
                    },
                    "不通过"
                  ),
                ]),
              ]);
            } else if (row.shzt == "未提交") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--default el-tag--light"],
                    },
                    "未提交"
                  ),
                ]),
              ]);
            }
          },
        },

        {
          field: "sh_name",
          title: "审核人",
          type: "string",
          width: 60,
          align: "center",
        },
        {
          field: "sh_time",
          title: "审核时间",
          type: "datetime",
          width: 100,
          align: "center",
        },
      ],
      dsjcolumns: [
        //表配置
        {
          field: "data_id", //数据库表字段,必须和数据库一样，并且大小写一样
          type: "string", //数据类型
          isKey: true, //是否为主键字段
          width: 80, //表格宽度
          hidden: true, //是否显示
          readonly: true,
          require: true,
          align: "left", //文字显示位置left、center
        },
        {
          field: "idx",
          title: "序号",
          type: "string",
          width: 50,
          align: "center",
        },
        {
          field: "citymc",
          title: "地市名称",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "sqcount",
          title: "申请次数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "jycs",
          title: "交验次数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "shzt",
          title: "最后一次申请记录审核状态",
          type: "string",
          width: 70,
          align: "center",
          render: (h, { row, column, index }) => {
            if (row.shzt == "已通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--success el-tag--light"],
                    },
                    "已通过"
                  ),
                ]),
              ]);
            } else if (row.shzt == "未审核") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--warning el-tag--light"],
                    },
                    "待审核"
                  ),
                ]),
              ]);
            } else if (row.shzt == "不通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--danger el-tag--light"],
                    },
                    "不通过"
                  ),
                ]),
              ]);
            } else if (row.shzt == "未提交") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--default el-tag--light"],
                    },
                    "未提交"
                  ),
                ]),
              ]);
            }
          },
        },

        {
          field: "sh_name",
          title: "审核人",
          type: "string",
          width: 60,
          align: "center",
        },
        {
          field: "sh_time",
          title: "审核时间",
          type: "datetime",
          width: 100,
          align: "center",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.example-tb {
  padding: 15px;
}
.tb {
  margin-top: 15px;
}
.v-header {
  background: white;
  padding: 10px;
}
.t-dis {
  margin-bottom: 15px;
  background: white;
}
.t-dis ::v-deep(.example-tb .el-alert) {
  display: none;
}
.t-dis ::v-deep(.example-tb .tb) {
  margin-top: 0 !important;
}
.t-dis ::v-deep(.example-tb .search-info) {
  margin-left: -19px;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.edit_btn {
  min-height: 40px;
  min-width: 100px;
  background: #409eff 80%;
  border: #409eff;
  font-size: 20px;
}
</style>
